<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="../../../css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../../../css/style.min.css" rel="stylesheet">
  <style>
    button{
        padding: 5px;
        border:2px solid #86acf2;
        background:#ffffff
    }
  </style>
</head>
<body onload="init()">
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      <!-- logo -->
      <div id="logo">
        <a href="../../index.html"><p style="width: 124px;height: 58px;font-family: AppleSystemUIFont;font-size: 31px;font-weight: normal;font-stretch: normal;line-height: 41px;letter-spacing: 0px;color: #D1F0F1;margin-left: 30px;margin-top:10px">健康药柜</p> </a>
      </div>
      <div class="lyear-layout-sidebar-scroll">

        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <li class="nav-item "> <a href="../../index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
            <!--          自己的内容-->
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-shopping"></i> 编辑商品</a>
              <ul class="nav nav-subnav">
                <li><a href="../EditProduct/AllProducts.html">所有商品</a> </li>
                <li><a href="../EditProduct/ProductSpecification.html">商品规格</a> </li>
                <li><a href="">产品设置</a> </li>
                <li><a href="">商品回收站</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-washing-machine"></i>售货机</a>
              <ul class="nav nav-subnav">
                <li><a href="../VendingMachine/MachineManagement.html">机器管理</a> </li>
                <li><a href="../VendingMachine/MerchandiseInventory.html">商品库存查看</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-history"></i>统计报表</a>
              <ul class="nav nav-subnav">
                <li><a href="ChartPresentation.html">图表展示</a> </li>
                <li><a href="AnalysisRecord.html">分析记录</a> </li>
                <li><a href="SalesRecord.html">销售记录</a> </li>
              </ul>
            </li>
          </ul>
        </nav>

        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2021. <a target="_blank" href="https://gitee.com/WebItemOfDE/web-vending-machine">自动售卖机</a> All rights reserved.</p>
        </div>
      </div>

    </aside>
    <!--End 左侧导航-->

    <!--头部信息-->
    <header class="lyear-layout-header">

      <nav class="navbar navbar-default">
        <div class="topbar">

          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 后台首页 </span>
          </div>

          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <span>我的 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
            <!--切换主题配色-->
            <li class="dropdown dropdown-skin">
              <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
              <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                <li class="drop-title"><p>主题</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                </li>
                <li class="drop-title"><p>头部</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                </li>
                <li class="drop-title"><p>侧边栏</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                </li>
              </ul>
            </li>
            <!--切换主题配色-->
          </ul>

        </div>
      </nav>

    </header>
    <!--End 头部信息-->

    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
        <div class="row" style="background-color: red">
          213
        </div>
        <div class="row" id="map_canvas" style="width: 100%;height: 800px">
        </div>
        <div class="row">
          <button style="text-align: center" id="mapButtion">点击按钮显示或隐藏地图</button>
        </div>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization,place&&key=RD6BZ-KGRE3-VPT3H-3WFIY-WBF4E-ITFX6"></script>
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../../js/main.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../../js/Chart.js"></script>
<script type="text/javascript">
  var markerIndex = 0;
  var map;

  //设置一个机器点data 和 热力图的点data
  var machineSitedata = [
    [39.959228, 116.367874],
    [39.984486, 116.427612],
    [39.988169, 116.279984],
    [39.847558, 116.402893],
    [39.941857, 116.383667],
    [40.022882, 116.551208],
    [39.819085, 116.581421],
    [39.924482, 116.205826],
    [39.757880, 116.162567],
    [39.631606, 116.325989],
    [39.797986, 116.415253],
    [40.117990, 116.416626],
    [40.271668, 116.638412],
    [40.143190, 116.236038],
    [39.928168, 116.515503],
    [39.902362, 116.389160],
    [39.935539, 116.377487]
  ];
  window.init = function() {
    var Map = qq.maps.Map;
    var Marker = qq.maps.Marker;
    var LatLng = qq.maps.LatLng;
    var Event = qq.maps.event;
    var MVCArray = qq.maps.MVCArray;
    var MarkerCluster = qq.maps.MarkerCluster;
    //默认地图中心设置为背景,设置地图的属性
    var latlng = new LatLng(39.91, 116.38);
    var options = {
      'zoom':16,
      maxZoom:16,
      minZoom:10,
      'center':latlng,
      'mapTypeId':"roadmap",
      keyboardShortcuts : false, //设置禁止通过键盘控制地图。默认情况下启用键盘快捷键。
      scrollwheel : true,        //设置滚动缩放默认不允许
      mapStyleId : 'style1'
    };
    //创建地图
    var map = new Map(document.getElementById('map_canvas'), options);
    //MVCArray类似于栈
    var markers = new MVCArray();
    var markerCluster;
    //设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
    //设置marks的图片等属性
    var anchor = new qq.maps.Point(0, 39),
        size = new qq.maps.Size(50, 50),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage(
            "../../../images/machine/自动售货机 (2).png",
            size,
            origin,
            anchor
        );
    //给mark创建信息窗口
    //添加信息窗口
    var info = new qq.maps.InfoWindow({
      map: map
    });
    let mapbutton=document.getElementById('mapButtion'); //拿到button对象
    let mapContainer=document.getElementById('map_canvas');
    mapbutton.style.display="none";
    //创建关闭地图时的文字图层
    let closeMapButtonStyle = "padding:5px;border:2px solid #86acf2;background:#ffffff";
    let closeMapButton = document.createElement('div');
    closeMapButton.style.cssText=closeMapButtonStyle;
    closeMapButton.innerHTML="关闭地图";
    let closeHotMapButton=document.createElement('div');
    //创建关闭热力图的文字显示图层
    closeHotMapButton.style.cssText=closeMapButtonStyle
    closeHotMapButton.style.margin="0 5px"
    closeHotMapButton.innerHTML="关闭热力图显示";
    //创建文字搜索图层
    let searchMapInput=document.createElement('input');
    let searchMapInputStyle="width:200px;padding:3px 4px;"
    searchMapInput.style.cssText=searchMapInputStyle;
    let keyword = "";
    //给点击关闭地图按钮创建点击事件
    qq.maps.event.addListener(closeMapButton,'click',function(event){
      mapContainer.style.display="none";
      mapbutton.style.display="";
    });
    //点击显示按钮实现显示地图
    qq.maps.event.addDomListener(mapbutton,'click',function(event){
      mapContainer.style.display="";
      mapbutton.style.display="none";
    });
    //给搜索图层添加事件
    const ap = new qq.maps.place.Autocomplete(searchMapInput);
    //添加监听事件
    qq.maps.event.addListener(ap, "confirm", function(res){
      keyword = res.value;
      searchService.search(keyword);
    });
    //调用Poi检索类。用于进行本地检索、周边检索等服务。
    var searchService = new qq.maps.SearchService({
      complete : function(results){
        if(results.type === "CITY_LIST") {
          searchService.setLocation(results.detail.cities[0].cityName);
          searchService.search(keyword);
          return;
        }
        var pois = results.detail.pois;
        var latlngBounds = new qq.maps.LatLngBounds();
        for(var i = 0,l = pois.length;i < l; i++){
          var poi = pois[i];
          latlngBounds.extend(poi.latLng);
        }
        map.fitBounds(latlngBounds);
      }
    });

    //遍历data中的数据并且放入markers
    function createCluster() {
      let i;
      for (i = 0; i < machineSitedata.length; i++) {
        (function (n) {
          console.log(('1'));
          var latLng = new LatLng(machineSitedata[n][0], machineSitedata[n][1]);
          var marker = new Marker({
            position:latLng,
            map:map,
            icon: icon,
            animation: qq.maps.MarkerAnimation.BOUNCE
          });
          markers.push(marker);
          qq.maps.event.addListener(marker, 'click', function() {
            marker.setIcon(icon);//更改当前点击marker样式

            info.open();

            info.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;">这是第 ' +
                n + ' 号机器</div>');
            info.setPosition(latLng);
          });
        })(i);
      }
      //创建一个点聚合的对象
      markerClusterer = new MarkerCluster({
        map:map, //设置点聚合的地图对象
        minimumClusterSize:2, //默认2
        markers:markers, //将所有点都添加到点聚合对象当中来
        zoomOnClick:true, //默认为true 点击已经聚合的标记点实现聚合分离
        gridSize:60, //默认60
        averageCenter:true, //默认false
        maxZoom:16, //默认18
      });
      Event.addListener(markerClusterer, 'clusterclick', function (evt) {
        // writeLog("mouse event", eventType);
        var ss =  evt;
        alert('点击了聚合点');
      });
    };
    //实现热力图部分，创建一个热力图对象
    var heat = new qq.maps.visualization.Heat({
      map: map, // 必填参数，指定显示热力图的地图对象
      radius: 30, // 辐射半径，默认为20
      //设置热力图颜色
      gradient: {
        0 : "#04fafa",
        0.1 : "#04fafa",
        0.2 : "#04fafa",
        0.3 : "#04fafa",
        0.4 : "#04fafa",
        0.5 : "#04fafa",
        0.6 : "#04fafa",
        0.7 : "#04fafa",
        0.8 : "#04fafa",
        0.9 : "#04fafa",
        1.0 : "#04fafa"
      }
    });
    // 获取热力数据
    var data = getHeatData();
    console.log(data);
    // 向热力图传入数据
    heat.setData(data);
    heat.hide();
    //给按钮添加事件实现点击隐藏/显示热力图
    qq.maps.event.addDomListener(closeHotMapButton,'click',function (event) {
      if(heat.visible){
        heat.hide();
      }else{
        heat.show();
      }
    })
    //将关闭地图的按钮添加到map对象当中
    map.controls[qq.maps.ControlPosition.TOP_CENTER].push(closeMapButton);
    map.controls[qq.maps.ControlPosition.TOP_CENTER].push(searchMapInput);
    map.controls[qq.maps.ControlPosition.TOP_CENTER].push(closeHotMapButton);
    //遍历data中的数据并且放入markers
    createCluster();
    //设置点的随机位置
    function getHeatData(cnt, max, min) {
      let data = [];
      let center = {
        lat: 39.9,
        lng: 116.4
      };
      cnt = cnt || 100;
      max = max || 100;
      min = min || 0;
      // for (let index = 0; index < cnt; index++) {
      //   let r = Math.random();
      //   let angle = Math.random() * Math.PI * 2;
      //   let heatValue = Math.random() * (max - min) + min;
      //   data.push({
      //     lat: center.lat + r * Math.sin(angle),
      //     lng: center.lng + r * Math.cos(angle),
      //     value: heatValue
      //   });
      // }
      for (let index = 0; index < machineSitedata.length; index++) {
        let r = Math.random();
        let angle = Math.random() * Math.PI * 2;
        let heatValue = Math.random() * (max - min) + min;
        data.push({
          lat: machineSitedata[index][0],
          lng: machineSitedata[index][1],
          value: heatValue
        });
      }
      return {
        max: max,
        min: min,
        data: data
      };
    }
  };

  $(function(){
    $('.search-bar .dropdown-menu a').click(function() {
      var field = $(this).data('field') || '';
      $('#search-field').val(field);
      $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    });
  });
  $(document).ready(function(e) {
    // 使用时，请自行引入jquery.cookie.js
    // 读取cookie中的主题设置
    var the_logo_bg    = $.cookie('the_logo_bg'),
        the_header_bg  = $.cookie('the_header_bg'),
        the_sidebar_bg = $.cookie('the_sidebar_bg'), // iframe版本如果删除了下面一行，请把这一行的逗号改成分号
        the_site_theme = $.cookie('the_site_theme'); // iframe版本可不需要这行
    if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
    if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
    if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
    if (the_site_theme) $('body').attr('data-theme', the_site_theme); // iframe版本可不需要这行

    // 处理主题配色下拉选中
    $(".dropdown-skin :radio").each(function(){
      var $this = $(this),
          radioName = $this.attr('name');
      switch (radioName) {
        case 'site_theme':
          $this.val() == the_site_theme && $this.prop("checked", true);
          break;  // iframe版中不需要这个case
        case 'logo_bg':
          $this.val() == the_logo_bg && $this.prop("checked", true);
          break;
        case 'header_bg':
          $this.val() == the_header_bg && $this.prop("checked", true);
          break;
        case 'sidebar_bg':
          $this.val() == the_sidebar_bg && $this.prop("checked", true);
      }
    });

    // 设置主题配色
    setTheme = function(input_name, data_name) {
      $("input[name='"+input_name+"']").click(function(){
        $('body').attr(data_name, $(this).val());
        $.cookie('the_'+input_name, $(this).val());
      });
    }
    setTheme('site_theme', 'data-theme'); // iframe版本可不需要这行
    setTheme('logo_bg', 'data-logobg');
    setTheme('header_bg', 'data-headerbg');
    setTheme('sidebar_bg', 'data-sidebarbg');
  });
</script>
</body>
</html>